<template>
	<div class="detailWarp">				
		<div class="m_head" ref="m_head">	
			<a class="prevbtn" @click.prevent="back">	
				<span class="prev rotate45"></span>
				<span class="prev1 rotate135"></span>
			</a>			
			<mt-navbar class="page-part" v-model="active">
      			<mt-tab-item id="tab-container1">商品</mt-tab-item>
      			<mt-tab-item id="tab-container2">详情</mt-tab-item>
      			<mt-tab-item id="tab-container3">评价</mt-tab-item>
    		</mt-navbar>
    		<a class="rightBtn" @click.prevent ="showmenu"><img src="../../images/menu.png" alt="" /></a>	
		</div>
		
		<mt-popup
  			v-model="popupVisible"
  			popup-transition="popup-fade" class="popupWarp">
				<div class="arrowWarp"><div class="triangle"></div>
					<ul class="menuList">
						<li><a @click="popupVisible=false">宝贝</a></li>
						<li><a @click="popupVisible=false">收藏</a></li>
						<li class="noline" @click="popupVisible=false"><a >品牌</a></li>
					</ul>
				</div>
		</mt-popup>

		<mt-tab-container v-model="active" :swipeable="canTouch" id="tabcontainer">
      		<mt-tab-container-item id="tab-container1">
				<!--首页轮播图-->
				<div class="swiper">
					<mt-swipe :auto="4000" class="detailswipe">
  						<mt-swipe-item v-for="(item,index) of imglist" :key="index" @swipeleft.stop @swiperight.stop><img :src = "item" alt=""  name="detailSwipeImg"/></mt-swipe-item>
					</mt-swipe>
				</div>
				<div class="info_content" id="detailContent">
    	
    				<div class="info_detail">
    					<h3 class="ptitle">{{detailInfo.goods_name}}</h3>
    					<div class="listproduct">
    						<i class="price_orign inf0-font">{{detailInfo.price}}</i>
    						<i class="new_price">{{detailInfo.discount_price}}</i>
    						<i class="moreLogin">登录查看更多</i>
    					</div>
    					<div class="listproduct">
    						<i class="nickName inf0-font">{{detailInfo.sales_num}}</i>
    						<i class="rongliang inf0-font">{{detailInfo.stock}}</i>
    						<i class="colorp inf0-font">{{detailInfo.comment_num}}</i>
    						<i class="sizep inf0-font">{{detailInfo.is_discount}}</i>
    					</div>
					</div>
			
    				<div class="border_info listproduct boder_warp">
    		    		<i class="like inf0-font"><img src="" /><span>收藏</span></i>
    					<i class="order_num inf0-font">起订量:100件</i>
    				</div>
    	
    				<div class="detailSection service boder_warp">
    					<div class="service_list">
    						<a href="javascript:void(0)">进入品牌</a>
    						<a href="javascript:void(0)">进入店铺</a>
    						<a href="javascript:void(0)">在线咨询</a>
    					</div>
    					<span>由“省省八00008店（时尚谷店）”为您提供发货及售后服务</span>
    				</div>
    				<div class="detailSection productRecomm boder_warp">
    					<p class="title-recom sectitle">商品推荐</p>
    					<div class="recommList clearfix">
    						<a href="javascript:void(0)"><img src="http://file.wddcn.com/wddwechatshop/picture/goods/2018/8/b729452b6e1e4d3094a687d1872a02a92.jpg_300x300.jpg" alt="" /><span>￥84</span></a>
    						<a href="javascript:void(0)"><img src="http://file.wddcn.com/wddwechatshop/picture/goods/2018/8/ba54a98337904e96983f04801a1568274.jpg_300x300.jpg" alt="" /><span>￥48</span></a>
    						<a href="javascript:void(0)"><img src="http://file.wddcn.com/wddwechatshop/picture/goods/2018/8/234bf4c0228b4340bbb15446b7b21c548.jpg_300x300.jpg" alt="" /><span>￥34</span></a>
    						<a href="javascript:void(0)" class="noneRight"><img src="http://file.wddcn.com/wddwechatshop/picture/goods/2018/8/f328d330951e4f498ab514a049e2ff745.jpg_300x300.jpg" alt="" /><span>￥113</span></a>
    					</div>
    					<div class=" bottomButtonWarp">
    						<a href="javascript:void(0)">换一换</a>
    						<a href="javascript:void(0)" class="noneBorderRight">更多商品</a>
    					</div>
    	 			</div>

    			</div>
      		</mt-tab-container-item>
      		<mt-tab-container-item id="tab-container2">
			  <ul>
    			<li v-for="item in lazyImgLists">
      				<img v-lazy.container="item" style="width: 100%;">
    			</li>
  				</ul>
      		</mt-tab-container-item>
      		<mt-tab-container-item id="tab-container3">
			123
     		</mt-tab-container-item>
    </mt-tab-container>
	</div>
</template>

<script>
	import api from '../../api/api.js'
	import { Toast } from 'mint-ui'
	import local from '../../local/local.js'
	var verifiedBy =false;
	export default{		
		data(){
			return {
			 	selected:'1',//注意就是这里，默认选字符串数字，不然初始没展示；
				active: 'tab-container1',
				popupVisible:false,
				id:0,
				canTouch:true,
				imglist:[],
				lazyImgLists:[],
				detailInfo:{}
			}
		},
		methods:{
			back(){
				this.$store.state.showBottomTab = true;
				this.$router.go(-1);//返回上一层
			},
			scrollBody(){
    			this.$refs.m_head.style.background =  this.changeOpacityColor(300,320+44);			
			},
			showmenu(){
				this.popupVisible = !this.popupVisible;
			}	
		},
		created(){	
			var that = this;
			this.id = this.$router.history.current.params.id;
			api.product.detail(this.id).then((res)=>{
				console.log('detailInfo'+ JSON.stringify(res.data));
				that.detailInfo = res.data;
				that.imglist = ['http://img11.360buyimg.com/n1/s450x450_jfs/t1/28696/5/303/302990/5c08c292E908e6dde/0f76593323867d7d.jpg',
				'//img12.360buyimg.com/n1/s450x450_jfs/t17083/327/2335382799/285989/d34a93fa/5af50e5fNa34f717e.jpg',
				'http://img11.360buyimg.com/n1/s450x450_jfs/t1/15380/32/115/191695/5c0736ccE8ae6fa76/deac2f7267328bc6.jpg'];
				that.lazyImgLists = ['https://img30.360buyimg.com/jgsq-productsoa/jfs/t1/9984/24/14849/129221/5c6a9a4eEe1ff188b/9b682535876b1b01.gif',
				'https://img30.360buyimg.com/jgsq-productsoa/jfs/t1/20367/14/9467/158833/5c7f9afdE0f2d7aab/3a7d9173f382c819.jpg',
				'https://img12.360buyimg.com/cms/jfs/t26116/320/1905562636/280777/aa4418ec/5bfb532aN007662b9.jpg',
				'http://img30.360buyimg.com/sku/jfs/t1/5647/16/13414/241753/5bd67a92Ed8f05586/f3159e02d7f3a6b0.jpg',
				'https://img30.360buyimg.com/sku/jfs/t7336/299/2873566922/208645/c4668de0/59b61434Nb19c997c.jpg',
				'https://img30.360buyimg.com/sku/jfs/t9205/314/1238549546/178920/6916fb8d/59b61438N814b17ff.jpg'];
			})
			
		},
		mounted(){ 
			var that = this;
			window.addEventListener("touchstart", function(e){
					console.log(e.target.name);
					if(e.target.name=='detailSwipeImg'){
						that.canTouch = false;
					}
					else{
						that.canTouch = true;
					}    			
			}, true);
//			window.addEventListener('scroll', this.scrollBody);

		},
		beforeDestroy(){

			window.removeEventListener("touchstart",function(e){});
//			window.removeEventListener('scroll', this.scrollBody);	
		}
	}
</script>

<style lang="css">
*{touch-action: none;}
.m_head{background: rgba(255,255,255,0);}
.detailWarp{overflow: hidden;}
.mint-navbar{background: none;height: .85rem;width: 70%;margin-top: .12rem;margin-left: 1.3rem;}
.mt-tab-item{padding: .1rem 0;}
.mint-tab-item-label{color:#fff;font-size: .25rem!important;font-weight: 300;height: .5rem;line-height: .5rem;}
.mint-navbar .mint-tab-item.is-selected {border-bottom: 0.04rem solid #FFFF99;color: #FFFF99;}
.mint-navbar .is-selected .mint-tab-item-label{    color: #FFFF99;}
.mint-tab-container{margin-top: 1rem;min-height: 10rem;height: auto;}
.mint-tab-container-wrap{background: #F3F3F3;}
.swiper{margin-top: 0rem;}
.detailswipe{height: 6.2rem!important;}
.info_content{}
.info_detail{overflow: hidden;width: 95%;height: auto;margin:  0 auto;}
.ptitle{font-size:.3rem;color:#333;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:auto;line-height: .5rem;width: 100%;overflow: hidden;margin-bottom: .2rem;margin-top: .2rem;}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* 3. */
 .ptitle{overflow:hidden; text-overflow:ellipsis;display:block; -webkit-box-orient:vertical;-webkit-line-clamp:0; }/* IE10+ */
}

.listproduct i{display: inline-block;vertical-align: top;}
.inf0-font{color: #999;height: .4rem;font-size: .2rem;margin-top: .07rem;}
.price_orign{text-decoration:line-through;}
.new_price{color: #FF0000;height: .4rem;font-size: .3rem;margin-left: .1rem;}
.moreLogin{margin-left: .2rem;vertical-align: bottom;}
.nickName{margin-top: .08rem;}
.rongliang{margin-left: .3rem;}
.colorp{margin-left:.4rem;margin-right: 2.0rem;max-width: 25%;min-width: 5%;text-align: right;}
.sizep{}

.boder_warp{border: .02rem solid rgba(0,0,0,.17);background:#fff;}
.border_info{height: .5rem;margin-top: .2rem;}
.like{width: 1.8rem;height: .6rem;margin-left: .2rem;}
.like img{width: .3rem;height: .3rem;display: inline-block;}
.like span{display: inline-block;vertical-align: middle;}
.order_num{width: 1.8rem;height: .6rem;line-height: .3rem;margin-right: 0rem;text-align: right;}

.detailSection{margin-top: .2rem;overflow: hidden;padding-bottom: .2rem;background: #fff;}
.service .service_list{width: 94%;margin: 0 auto;margin-top: .2rem;margin-bottom: 1.2rem;margin-left: .3rem;}
.service .service_list a{display: block;float:left ;width: 27.44%;height: .8rem;color: #999;border: .02rem solid rgba(0,0,0,0.2);text-align: center;border-radius: 0.2rem;line-height: .8rem;margin-right: .33rem;}
.service>span{display: block;margin-top: .2rem;height: .5rem;width: 90%;margin: 0 auto;padding-bottom: .42rem;line-height: .3rem;}

.productRecomm{padding-bottom: 0rem;}
.sectitle{margin-left: .3rem;height: 0.6rem;line-height: .6rem;font-size: .22rem;}
.recommList{width: 99%;overflow: hidden;margin: 0 auto;margin-left: .26rem;}
.recommList>a{display: block;float: left;width: 1.2rem;height: 1.2rem;margin-right: .23rem;position: relative;}
.recommList>a>img{width: 1.2rem;height: 1.2rem;}
.recommList>a>span{display: block;position: absolute;bottom: 0;left: 0;width: 1.13rem;height: .3rem;background: rgba(255,255,255,0.3);line-height: 0.34rem;color: #FF0000;text-align: left;font-size: .2rem;}
.noneRight{margin-right: 0rem;}
.bottomButtonWarp{margin-top:.2rem;background: #f0eded;overflow: hidden;border-top:.02rem solid rgba(0,0,0,.17);}
.bottomButtonWarp a{display:block;width:50%;height: 0.6rem;line-height: .6rem;text-align: center;color: #333;border-right:.02rem solid rgba(0,0,0,.17);float: left;}
.bottomButtonWarp a.noneBorderRight{border:none;}
</style>